<template>
	<div id="app">
		<router-view />
	</div>
</template>

<script>
export default {
	name: 'App',
}
</script>
<style lang="scss">
body html {
	font-family: 'PingFangSC-Regular', 'PingFang SC';
}

body .el-table th.gutter {
	display: table-cell !important;
}

body .el-table colgroup.gutter {
	display: table-cell !important;
}

body .el-table .el-table__fixed {
	height: 100% !important;
}

body .el-table .el-table__fixed-right {
	height: 100% !important;
}

ul,
li {
	padding: 0;
	margin: 0;
	list-style: none;
}

/* 使表格兼容safari，不错位 */
.el-table__body {
	width: 100%;
	table-layout: fixed !important;
}

.el-table__fixed-right {
	height: 100% !important; //设置高优先，以覆盖内联样式
}

.el-table__fixed-header-wrapper {
	.el-table__header {
		td:not-last-child(2) {
			right: -1px;
		}
	}
}

.el-table__row {
	&>td:not-last-child(2) {
		right: -1px;
	}
}

// 拖拽表格 宽度  内容表格与表头宽度保持一致
.el-table .cell.el-tooltip {
	width: 100% !important;
}

.search_box .select_box .el-select {
	width: 100% !important;
}

.validColor {
	padding: 12px 10px;
	box-sizing: border-box;
	border-radius: 10px;
	color: #fff;
	font-size: 12px;
	background: #67c23a;
}

.invalidColor {
	padding: 12px 10px;
	box-sizing: border-box;
	border-radius: 10px;
	color: #fff;
	font-size: 12px;
	background: #f56c6c;
}

.invalidColor2 {
	padding: 12px 10px;
	box-sizing: border-box;
	border-radius: 10px;
	color: #fff;
	font-size: 12px;
	background: #DFB771;
}

.waitvalidColor {
	padding: 12px 10px;
	box-sizing: border-box;
	border-radius: 10px;
	color: #fff;
	font-size: 12px;
	background: #3a7dc2;
}

.blockShape {
	padding: 12px 10px;
	box-sizing: border-box;
	border-radius: 10px;
	color: #fff;
	font-size: 12px;
}

// 处理type=number
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
}

input[type='number'] {
	-moz-appearance: textfield !important;
}


// 数字input  光标上移问题
.el-input__inner {
	line-height: 1px !important;
}

.el-tooltip__popper {
	max-width: 300px !important;
}

.el-tooltip__popper,
.el-tooltip__popper .is-dark {
	max-width: 300px !important;
	line-height: 18px;
	color: #fff !important;
	background: #333 !important;
	opacity: 0.9;
	border: none !important;
}

.el-upload--picture-card {
	width: 104px !important;
	height: 104px !important;
	line-height: 104px !important;
}

.el-upload-list__item {
	width: 104px !important;
	height: 104px !important;
	line-height: 104px !important;
}

// 多张图片
.boxIgmContent {
	width: auto;
	height: auto;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;

	&>.imgBox {
		width: 104px;
		height: 104px;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		position: relative;
		margin-right: 20px;
		margin-bottom: 20px;
		box-sizing: border-box;
		cursor: pointer;

		.upload_box {
			border-radius: 6px;
			overflow: hidden;
		}

		.avatar-uploader {
			width: 104px;
			height: 104px;
			position: relative;
			display: inline-block;
			overflow: hidden;
		}

		.tipInfo {
			height: 104px;
			display: flex;
			align-items: flex-end;
			color: #999999;
			font-size: 14px;
			margin-left: 13px;
		}

		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}

		.avatar-uploader .el-upload:hover {
			border-color: #409eff;
		}

		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 104px;
			height: 104px;
			line-height: 104px;
			text-align: center;
		}

		.avatar {
			width: 104px;
			height: 104px;
			display: block;
		}

		.el-avatar {
			img {
				width: 100%;
				height: 100%;
				overflow: hidden;
				border-radius: 6px;
			}
		}

		.deleteImg {
			position: absolute;
			top: -10px;
			left: 92px;
			cursor: pointer;

			&>img {
				width: 20px;
				height: 20px;
			}

			&>.el-icon-error {
				font-size: 18px;
				color: #dfb771;
				overflow: hidden;
			}
		}
	}
}

// 单张
.avatar-uploader {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	width: 104px;
	height: 104px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	float: left;
}

.tipInfo {
	height: 104px;
	display: flex;
	align-items: flex-end;
	color: #999999;
	font-size: 14px;
	margin-left: 13px;
}

.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 104px;
	height: 104px;
	line-height: 104px;
	text-align: center;
}

.avatar {
	width: 104px;
	height: 104px;
	display: block;
}

.el-avatar {
	img {
		width: 100%;
		height: 100%;
	}
}

.deleteImg {
	position: absolute;
	top: -10px;
	left: 92px;
	cursor: pointer;

	&>img {
		width: 20px;
		height: 20px;
	}

	&>.el-icon-error {
		font-size: 18px;
		color: #dfb771;
		overflow: hidden;
	}
}

// 表格 搜索
.search_box {
	position: relative;
	height: 48px;
	display: flex;

	&::before {
		content: '';
		display: block;
		width: calc(100% + 20px);
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		height: 1px;
		background-color: #dfe6ec;
	}

	&>div {
		width: 100%;
		height: 48px;
		box-sizing: border-box;
		padding-top: 10px;
	}

	.select_box {
		.el-select {
			width: 100%;
		}

		input {
			padding-left: 5px;
			padding-right: 20px;
		}

		.el-select__caret {
			width: 20px;
		}
	}

	.time_range_box {
		&>div {
			width: 100%;
		}
	}
}

.el-table__empty-block {
	width: 100% !important;
}
</style>
